迷茫大四生宅在宿舍佛系自學JavaScript Day3

javascript 初學者

累了就睡蛙 2023-03-17 01:14:33 ‧ 995 瀏覽

分享至

CSS基礎

CSS(Cascading Style Sheets，階層樣式表)是一種風格頁面語言(Style Sheet Language)，主要用來讓HTML中的各元素加上頁面樣式(Style)。

整個架構稱為規則集(Rule Set)，也可以簡稱為規則(Rule)。
資料來源：MDN-CSS基本

選擇器(Selector)
選擇器為HTML中的元素，表示將被套用頁面樣式的元素。注意看上面引用的圖，只有選擇器是在**{}**外的。
屬性(Property)
屬性是更改HTML元素的方法之一。
屬性值(Property Value)
屬性值接在屬性之後，中間用"："隔開，表示套用在元素上的屬性。
宣告(Declaration)
宣告由屬性及屬性值組成，表示被選擇的元素將被指定套用上所宣告的頁面樣式。規則中可以包含多個宣告，宣告間以"；"區分。

多元素
多個元素可以共用同一份規則，元素間以","區隔即可。
選擇器的類型
除了上述介紹的元素選擇器外，還有其他不同類型的選擇器，這邊就不一一介紹，有興趣的可以自行前往MDN-CSS基本查看喔~
常用屬性介紹

font-size: font-size: 12px，字體大小，px為pixel(像素)的縮寫。
text-align: text-align: center，字體水平對齊(靠左對齊、置中、靠右對齊)。
line-height: line-height: 2，行高。
letter-spacing: letter-spacing: 1px，字母間距。
padding: padding: 0 0 30px 20px(上，右，下，左) or padding: 20px 0(上&下，右&左) or padding: 10px(上&下&右&左)，內容周圍的空格。
border: border: 5px solid brown(線粗，邊框樣式，顏色)，矩形內容的外框線。更多用法詳見CSS的框線樣式：border。
margin: margin: 25px auto(用法同屬性padding)(此處auto為自動平分左右空格)，元素外的空間。
width: width: 600px，元素的寬度。
background-color: background-color: #FDE3D3(顏色可以使用英文單字或顏色編碼，不過單字只能是一個字，更多顏色編碼與詞彙見文字顏色)，元素內容的背景色。
color: color: palevioletred(用法同屬性background-color)，元素內容的顏色。
text-shadow: text-shadow: 3px 3px 1px grey(水平偏移，垂直偏移，模糊半徑，顏色)(水平偏移正值右移，負值左移；垂直偏移正值下移，負值上移；模糊半徑數值越大，陰影越模糊)，字體陰影。
display: dispaly: block(用法詳見CSS Display 基本概念)，設置元素的顯示模式。

小試身手

CSS程式碼

p {
    color: gray;
}

li {
    color: palevioletred;
}

html {
    font-size: 10px;
    font-family: 'Sono', sans-serif;
    background-color: #E6C35C;
}

body {
    width: 600px;
    margin: 25px auto;
    background-color: #FDE3D3;
    padding: 0 0 30px 20px;
    border: 5px solid brown;
}  

h1 {
    font-size: 50px;
    text-align: center;
    margin: 0;
    padding: 20px 0;
    color: chocolate;
    text-shadow: 3px 3px 1px grey;
}
  
p, li {
    font-size: 16px;
    line-height: 2;
    letter-spacing: 1px;
}

img {
    display: block;
    margin: 0 auto;
    border: 3px solid palevioletred;
}

HTML程式碼

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css2?family=Sono&display=swap" rel="stylesheet" type="text/css">
  </head>

  <body>
    <h1>This is a cat</h1>
    <img src="images/cat2.jpg" alt="A cat which has a big head">
    <p>There are several advantages about raising cats:</p>
    <ul>
      <li>They are cute</li>
      <li>They are cute</li>
      <li>They are cute</li>
    </ul> 
    <p>If you are a beginner and want to learn JavaScript well, link to <a href="https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web">MDN</a>
      and have fun.</p>
  </body>
</html>

成果

[此貓貓圖為CC0授權]